<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>9-实现拖拽和框选的子类.html</title>
    <style>
      #box {
        position: absolute;
        left: 0;
        top: 0;
        width: 100px;
        height: 100px;
        background: red;
        cursor: pointer;
      }
      .selectBox {
        position: fixed;
        border: 1px solid #06c0fd;
        background-color: rgba(6, 192, 255, 0.3);
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
    <script src="js/event.js"></script>
    <script src="js/drag.js"></script>
    <script>
      // 拖拽子类
      class DragEl extends Drag {
        constructor(...arg) {
          super(...arg);
          this.startOffset = {};
          this.on("dragstart", (e) => {
            this.dragStart(e);
          });
          this.on("dragmove", (e, dis, now) => {
            this.dragMove(e, dis, now);
          });
        }
        dragStart(e) {
          this.startOffset = {
            x: parseFloat(getComputedStyle(this.el)["left"]),
            y: parseFloat(getComputedStyle(this.el)["top"]),
          };
        }
        dragMove(e, dis, now) {
          let nowOffset = {
            x: this.startOffset.x + dis.x,
            y: this.startOffset.y + dis.y,
          };
          this.el.style.left = nowOffset.x + "px";
          this.el.style.top = nowOffset.y + "px";
        }
      }

      // 拖拽
      let box = document.querySelector("#box");
      // let boxDrag = new Drag(box);
      // let startOffset = {}; // 按下时，元素坐标
      // boxDrag.on("dragstart", (e) => {
      //   console.log("开始拖拽时执行", e);
      //   startOffset = {
      //     x: parseFloat(getComputedStyle(box)["left"]),
      //     y: parseFloat(getComputedStyle(box)["top"]),
      //   };
      //   e.stopPropagation();
      // });
      // boxDrag.on("dragmove", (e, dis, now) => {
      //   console.log("拖拽中执行", e, dis, now);
      //   let nowOffset = {
      //     x: dis.x + startOffset.x,
      //     y: dis.y + startOffset.y,
      //   };
      //   box.style.left = nowOffset.x + "px";
      //   box.style.top = nowOffset.y + "px";
      // });
      // console.log(boxDrag);
      // 拖拽子类实例化
      let boxDrag = new DragEl(box);
      boxDrag.on("dragstart", (e) => {
        e.stopPropagation(); // 处理冒泡
      });

      class DragSelect extends Drag {
        constructor(...arg) {
          super(...arg);
          this.select = null;
          this.startOffset = {};
          this.on("dragstart", (e) => {
            this.dragStart(e);
          });
          this.on("dragmove", (e, dis, now) => {
            this.dragMove(e, dis, now);
          });
          this.on("dragend", (e) => {
            this.dragEnd(e);
          });
        }
        dragStart(e) {
          this.startOffset = {
            x: e.clientX,
            y: e.clientY,
          };
          this.select = document.createElement("div");
          this.select.className = "selectBox";
          document.body.appendChild(this.select);
          e.stopPropagation(); // 处理冒泡
        }
        dragMove(e, dis, now) {
          // 框的宽度：两个坐标点的横向差值
          this.select.style.width = Math.abs(dis.x) + "px";
          // 框的高度：两个坐标点的纵向差值
          this.select.style.height = Math.abs(dis.y) + "px";
          // 框的left：两个坐标点靠近左侧的横坐标(较小的值)
          this.select.style.left = Math.min(now.x, this.startMouse.x) + "px";
          // 框的top：两个坐标点靠近上方的纵坐标(较小的值)
          this.select.style.top = Math.min(now.y, this.startMouse.y) + "px";
        }
        dragEnd(e) {
          this.select.remove();
        }
      }
      // 框选
      // let selectDrag = new Drag(document);
      // let select = null; // 记录元素
      // selectDrag.on("dragstart", (e) => {
      //   start = {
      //     x: e.clientX,
      //     y: e.clientY,
      //   };
      //   select = document.createElement("div");
      //   select.className = "selectBox";
      //   document.body.appendChild(select);
      //   e.stopPropagation();
      // });
      // selectDrag.on("dragmove", (e, dis, now) => {
      //   // 框的宽度：两个坐标点的横向差值
      //   select.style.width = Math.abs(dis.x) + "px";
      //   // 框的高度：两个坐标点的纵向差值
      //   select.style.height = Math.abs(dis.y) + "px";
      //   // 框的left：两个坐标点靠近左侧的横坐标(较小的值)
      //   select.style.left = Math.min(now.x, selectDrag.startMouse.x) + "px";
      //   // 框的top：两个坐标点靠近上方的纵坐标(较小的值)
      //   select.style.top = Math.min(now.y, selectDrag.startMouse.y) + "px";
      // });
      // selectDrag.on("dragend", (e) => {
      //   select.remove();
      // });

      // 框选子类
      let selectDrag = new DragSelect(document);
    </script>
  </body>
</html>
